<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>春田花花幼稚园</title>

    <!-- element plus stylesheet -->
    <link rel="stylesheet" th:href="@{/static/element-plus/index.css}"/>
    <!--custom style-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/icon-main.css}">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body style="background: #EEEEEE">
<div id="app">
    <div class="_body_head">
        <div class="top-banner">
            <div class="logo-name">
                <h1>春田花花幼稚园</h1>
                <h5>梦开始的地方</h5>
            </div>
        </div>
        <div class="_content">
            <el-container>
                <el-header style="padding: 0;">
                    <div class="nav-box">
                        <div class="main-container flex-row">
                            <ul class="nav">
                                <li>
                                    <router-link to="/" :class="count===0?'active':''"><a
                                            @click="changMenu(0)">首页</a></router-link>
                                </li>
                                <li>
                                    <router-link to="/activity" :class="count===1?'active':''"><a
                                            @click="changMenu(1)">活动天地</a></router-link>
                                </li>
                                <li v-if="currentUser?.role=='ROLE_ADMIN'">
                                    <router-link to="/classGradeAndUserManage/userManage" :class="count===2?'active':''"><a
                                            @click="changMenu(2)">班级和用户管理</a></router-link>
                                </li>
                                <li v-if="currentUser?.role=='ROLE_TEACHER'">
                                    <router-link to="/teacher/childrenManage" :class="count===3?'active':''"><a
                                            @click="changMenu(3)">我的班级</a></router-link>
                                </li>
                            </ul>
                            <div>
                                <ul v-if="currentUser" class="nav">
                                    <li>
                                        欢迎您：
                                        <el-dropdown trigger="click" @command="handleCommand">
                                                <span style="color: #ffffff;cursor: pointer;font-size: 16px;">
                                                    {{currentUser.name}}
                                                    <i class="el-icon-arrow-down el-icon--right"></i></span>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <el-dropdown-item icon="el-icon-user" command="basicInfo">信息维护
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </li>
                                    <li ><a class="active out" th:href="@{/logout}">退出</a></li>
                                </ul>
                                <ul v-if="!currentUser" class="nav">
                                    <li><a class="active out" th:href="@{/toLogin}">请登录</a></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </el-header>
                <router-view style="margin-top: 20px;"></router-view>
            </el-container>
        </div>
    </div>
</div>
<!-- 引入 Vue -->
<script th:src="@{/static/vue-next/vue.global.js}"></script>
<!--Vue Router-->
<script th:src="@{/static/vue-router/vue-router.global.js}"></script>
<!-- element plus -->
<script th:src="@{/static/element-plus/index.full.js}"></script>
<!--local处理-->
<script th:src="@{/static/element-plus/local/zh-cn.js}"></script>
<!--vue loader-->
<script th:src="@{/static/vue3-sfc-loader/vue3-sfc-loader.js}"></script>
<script th:src="@{/static/vue3-sfc-loader/vue-loader.js}"></script>
<!--routes-->
<script th:src="@{/components/router/index.js}"></script>
<!--axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    /**
     * 整体SPA
     */
    const App = {
        data() {
            return {
                activeMenu: null,
                count: 0,
                currentUser:null,
            }
        },
        methods:{
            /**
             * 切换菜单
             */
            changMenu(num) {
                this.count = num;
            },
        },
        mounted(){
            console.log("mounted!");
            // 获取当前登录用户
            axios.get('/getCurrentUser').then(response => {
                if (response.data.success) {
                    this.currentUser = response.data.data;
                } else {
                    this.currentUser = null;
                }
            });
        }
    };
    // Vue.component("v-xml-tree", vXmlTree);
    const app = Vue.createApp(App);
    app.use(router);
    // ElementPlus.locale(ElementPlus.lang.zhCn);
    app.use(ElementPlus, {
        locale: ElementPlus.lang.zhCn
    })
    app.mount("#app");
</script>
</body>
</html>